<template>
  <div>
    <div class="con" v-for="item in list" :key="item.id">
      <h1>{{ item.name }}</h1>
      <el-table :data="item.children" style="width: 100%">
        <el-table-column prop="name" label="名称"> </el-table-column>
        <el-table-column prop="dic" label="描述"> </el-table-column>
        <el-table-column prop="price" label="价格"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.num"
              :min="1"
              :max="10"
              label="描述文字"
            ></el-input-number>
            <el-button type="primary" @click="add(scope.row)"
              >加入购物车</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      //商品列表
    };
  },
  methods: {
    getList() {
      this.$axios.get("data.json").then((res) => {
        console.log(res);
        this.list = res.data;
      });
    },
    add(row) {
      this.$store.commit("add", JSON.parse(JSON.stringify(row)));
      //处理一下深拷贝浅拷贝的问题
      //   JSON.parse(JSON.stringify(row)) 把浅拷贝变成深拷贝
    },
  },
  created() {
    this.getList();
  },
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.con {
  > h1 {
    background: #cccc;
    line-height: 50px;
    height: 50px;
  }
}
</style>
